<template>
    <div>
        <!-- zdManage! -->
        <el-row>
            <el-col :span="24">
                <div class="container">
                    <el-row class="head-fun">
                        <el-col :span="24">
                            <div class="lf choose-title">行政区域</div>
                            <el-input v-model="zhanName" size="mini" style="width:150px" class="choose-input lf"></el-input>
                            <div class="lf choose-title">站点名称</div>
                            <el-input v-model="chargeMan" size="mini" style="width:150px" class="choose-input lf"></el-input>
                            <div class="lf choose-title">助记码</div>
                            <el-input v-model="phone" size="mini" style="width:150px" class="choose-input lf"></el-input>
                            <button class="zd-check-btn" @click="getZdList"><img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询</button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24" class="table-fun">
                            <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="refresh">刷新</div>
                            <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="amWin=true;winTitle='添加';modTag=1">添加</div>
                            <img src="../../assets/imgs/operation_icon_xiugai_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="amWin=true;winTitle='修改';modTag=0">修改</div>
                            <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="del">删除</div>
                        </el-col>
                    </el-row>
                    <!-- 表格数据 -->
                    <el-row>
                        <el-col :span="24">
                            <avue-crud :data="zdList[0].data" :option="zdList[0].option" @current-row-change="rowChange" :page="zdList[0].page" @current-change="zdT1Page"></avue-crud>
                        </el-col>
                    </el-row>
                    <!-- 表格2-->
                    <el-row>
                        <el-col :span="24" class="table2-container">
                            <div class="road-text">点选站点记录后即可管理其下车点</div>
                        </el-col>
                    </el-row>
                    <!-- 表格菜单栏 -->
                    <el-row>
                        <el-col :span="24" class="table2-fun">
                            <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="refreshII">刷新</div>
                            <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="addII">添加</div>
                            <img src="../../assets/imgs/operation_icon_xiugai_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="mod">修改</div>
                            <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="delII">删除</div>
                        </el-col>
                    </el-row>
                    <!-- 表格2 -->
                    <el-row>
                      <el-col :span="24">
                        <avue-crud :data="roadList[0].data" :option="roadList[0].option" @current-row-change="rowChangeRoad" :page="roadList[0].page" @current-change="zdT2Page"></avue-crud>
                      </el-col>
                    </el-row>
                    <!-- 弹窗 -->
                    <!-- 添加修改弹窗 -->
                    <div class="modal-win" v-show="amWin">
                      <!-- 标题栏 -->
                      <el-row class="add-title">
                          <div class="closeWin" @click="amWin=false">X</div>
                          <el-col :span="24">
                              <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt=""><span class="add-text">{{winTitle}}</span>
                          </el-col>
                      </el-row>
                      <!-- 表单栏 -->
                      <avue-form ref="form" v-model="winMsg.data" :option="winMsg.option" class="yz-form"></avue-form>
                      <button class="check-btn rf" @click="amWin=false"><img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                      <button class="check-btn rf" @click="winTitle=='添加'?add():update()"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确认</button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!-- 表2弹窗 -->
        <div class="modal-win" v-show="add2Win">
            <!-- 标题栏 -->
            <el-row class="add-title">
                <div class="closeWin" @click="add2Win=false">X</div>
                <el-col :span="24">
                    <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt=""><span class="add-text">{{win2Title}}</span>
                </el-col>
            </el-row>
            <!-- 表单栏 -->
            <avue-form ref="form" v-model="modFormII.data" :option="modFormII.option" class="yz-form"></avue-form>
            <button class="check-btn rf" @click="add2Win=false"><img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
            <button class="check-btn rf" @click="winTitle=='添加'?addSure():updateII()"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确认</button>
        </div>
    </div>
</template>

<script>
import qs from "qs";
import TableData from "../../components/common/tableData";
export default {
  data: function() {
    return {
      activeTag: "5-3",
      zhanName: "",
      chargeMan: "",
      phone: "",
      currentRow:"",
      zdList: [
        {
          page: {
            pageSizes: [10],
            total: 2,
            currentPage: 1,
            pageSize: 10
          },
          data: [],
          option: {
            highlightCurrentRow:true,
            page: true,
            stripe: true,
            menu: false,
            align: "center",
            menuAlign: "center",
            column: []
          }
        }
      ],
      roadList: [
        {
            page: {
            pageSizes: [10],
            total: 2,
            currentPage: 1,
            pageSize: 10
          },
          data: [],
          option: {
            highlightCurrentRow:true,
            page: true,
            stripe: true,
            menu: false,
            align: "center",
            menuAlign: "center",
            column: [
              {
                label:"名称",
                prop:"name"
              },
              {
                label:"备注",
                prop:"remarks"
              },
              {
                label:"操作",
                prop:"list"
              },
            ]
          }
        }
      ],
      currentRowRoad:"",
      amWin:false,
      winTitle:"test",
      winMsg:{
        data:{},
        option:{
          column:[
            {
              label:"中心编码",
              prop:"centerNum",
              disabled:true,
              span:12
            },
            {
              label:"中心名称",
              prop:"centerName",
              disabled:true,
              span:12
            },
            {
              label:"编码",
              prop:"Number",
              span:12
            },
            {
              label:"助记码",
              prop:"helpNum",
              span:12
            },
            {
              label:"对外名称",
              prop:"outName",
              span:12
            },
            {
              label:"对内名称",
              prop:"inName",
              span:12
            },
            {
              label:"行政区域",
              prop:"xzPlace",
              span:24
            },
            {
              label:"公里",
              prop:"milter",
              span:12
            },
            {
              label:"行驶时间",
              prop:"driveTime",
              span:12
            },
            {
              label:"备注",
              prop:"remark",
              type:"textarea",
              span:24
            },
          ]
        }
      },
      modTag:0,
      add2Win:false,
      win2Title:"test",
      modFormII:{
        data:{},
        option:{
          column:[
            {
              label:"站点",
              prop:"staDian",
              disabled:true,
              span:24
            },
            {
              label:"下车点名称",
              prop:"downName",
              span:24
            },
            {
              label:"备注",
              prop:"remark",
              type:"textarea",
              span:24
            },
          ]
        }
      }
    };
  },
  methods: {
    zdT1Page(val){
      this.zdList[0].page.currentPage=val;
      this.getZdList();
    },
    zdT2Page(val){
      console.log(val)
      this.roadList[0].page.currentPage=val;
      this.getRoadList()
    },
    getZdList() {
      this
        .postRequest("/sch/data/station/list",{
          filterRules:JSON.stringify([
          {"field":"base_station.name_in","op":"cn","value":this.chargeMan},{"field":"base_station.spell","op":"cn","value":this.phone},{"field":"base_station.region_id","op":"eq","value":this.zhanName}
        ]),
          rows:10,
          page:this.zdList[0].page.currentPage
        })
        .then(data => {
          this.zdList[0].page.total=data.data.totalRow;
          this.zdList[0].data=data.data.list;
        });
    },
    refresh() {
      this.getZdList();
    },
    add() {
      this.winMsg.data.centerName="";
      this.winMsg.data.Number="";
      this.winMsg.data.helpNum="";
      this.winMsg.data.inName="";
      this.winMsg.data.outName="";
      this.winMsg.data.xzPlace="";
      this.winMsg.data.milter="";
      this.winMsg.data.driveTime="";
      this.winMsg.data.remark="";
      this
        .getRequest(
          "/sch/data/station/add?station.official_code=&station.official_name="+this.winMsg.data.centerName+"&station.code="+this.winMsg.data.Number+"&station.id=&station.spell="+this.winMsg.data.helpNum+"&station.name_in="+this.winMsg.data.inName+"&station.name_out="+this.winMsg.data.outName+"&station.region_id="+this.winMsg.data.xzPlace+"&station.kilo="+this.winMsg.data.milter+"&station.runtime="+this.winMsg.data.driveTime+"&station.remarks="+this.winMsg.data.remark
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getZdList();
            this.amWin=false;
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    update() {
      this
        .getRequest(
          "/sch/data/station/update?station.official_code=&station.official_name="+this.winMsg.data.centerName+"&station.code="+this.winMsg.data.Number+"&station.id=&station.spell="+this.winMsg.data.helpNum+"&station.name_in="+this.winMsg.data.inName+"&station.name_out="+this.winMsg.data.outName+"&station.region_id="+this.winMsg.data.xzPlace+"&station.kilo="+this.winMsg.data.milter+"&station.runtime="+this.winMsg.data.driveTime+"&station.remarks="+this.winMsg.data.remark
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getZdList();
            this.amWin=false;
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    del() {
      this
        .postRequest(
          "/sch/data/station/del",{
            id:this.currentRow.id
          }
        )
        .then(data => {
          this.$message.error(data.data[1]);
        });
    },
    refreshII() {
      this.getRoadList();
    },
    addII() {
      this.add2Win=true;
      this.win2Title="添加";
      this.modFormII.data.staDian=this.currentRow.name_in;
      this.modFormII.data.downName="";
      this.modFormII.data.remark="";
    },
    addSure(){
      console.log(this.currentRow);
      this.getRequest("/sch/data/station/dropoff/add?stationDropOff.id=&stationDropOff.station_id="+this.currentRow.id+"&stationDropOff.name="+this.modFormII.data.downName+"&stationDropOff.remarks="+this.modFormII.data.remark).then(data=>{
        this.msgShow(data,function(){this.add2Win=false})
      })
    },
    updateII(){
      this.getRequest("/sch/data/station/dropoff/update?stationDropOff.id="+this.currentRowRoad.id+"&stationDropOff.station_id="+this.currentRow.id+"&stationDropOff.name="+this.modFormII.data.downName+"&stationDropOff.remarks="+this.modFormII.data.remark).then(data=>{
        this.msgShow(data,function(){this.add2Win=false})
      })
    },
    mod() {
      this.add2Win=true;
      this.win2Title="修改";
      this.modFormII.data.staDian=this.currentRow.name_in;
      this.modFormII.data.downName=this.currentRowRoad.name;
      this.modFormII.data.remark=this.currentRowRoad.remarks;
    },
    delII() {
      console.log(this.currentRowRoad.id);
      this
        .postRequest("/sch/data/station/del",{
          id:this.currentRowRoad.id
        })
        .then(data => {
          this.msgShow(data,function(){})
        });
    },
    tableCreate() {
      this.zdList[0].option.column.push(
        {
          label: "站内编码",
          prop: "create_org"
        },
        {
          label: "站内名称",
          prop: "official_name"
        },
        {
          label: "对外名称",
          prop: "name_out"
        },
        {
          label: "助记码",
          prop: "spell"
        },
        {
          label: "行驶时间",
          prop: "time"
        },
        {
          label: "里程",
          prop: "kilo"
        },
        {
          label: "辖区省",
          prop: "province"
        },
        {
          label: "辖区市",
          prop: "county"
        },
        {
          label: "辖区镇",
          prop: "zhen"
        },
      );
    },
    check(){
      this.postRequest("/sch/data/station/list",{
        filterRules:JSON.stringify([
          {"field":"base_station.name_in","op":"cn","value":this.chargeMan},{"field":"base_station.spell","op":"cn","value":this.phone},{"field":"base_station.region_id","op":"eq","value":this.zhanName}
        ])
      }).then(data=>{

      })
    },
    getRoadList(){
      this.getRequest("/sch/data/station/dropoff/list",{
        rows:10,
        page:this.roadList[0].page.currentPage
      }).then(data=>{
        this.roadList[0].page.total=data.data.totalRow;
        this.roadList[0].data=data.data.list;
      });
    },
    rowChangeRoad(val){
      this.currentRowRoad=val;
    },
    rowChange(val){
      console.log(val)
      this.currentRow=val;
      this.getRoadList();
      if(this.modTag==0){
        this.winMsg.data.centerNum=val.official_code;
        this.winMsg.data.centerName=val.official_name;
        this.winMsg.data.Number=val.code;
        this.winMsg.data.helpNum=val.node_code;
        this.winMsg.data.outName=val.name_out;
        this.winMsg.data.inName=val.name_in;
        this.winMsg.data.xzPlace=val.region_id;
        this.winMsg.data.milter=val.kilo;
        this.winMsg.data.driveTime=val.runtime;
        this.winMsg.data.remark=val.remarks;
      }else if(this.modTag==1){
        this.winMsg.data.centerNum="";
        this.winMsg.data.centerName="";
        this.winMsg.data.Number="";
        this.winMsg.data.helpNum="";
        this.winMsg.data.outName="";
        this.winMsg.data.inName="";
        this.winMsg.data.xzPlace="";
        this.winMsg.data.milter="";
        this.winMsg.data.driveTime="";
        this.winMsg.data.remark="";
      }
    }
  },
  computed: {},
  components:{TableData},
  watch: {},
  mounted() {
    console.log("zdManage");
    this.$emit("sendActive", this.activeTag);
    this.tableCreate();
    this.getZdList();
    this.refreshII();
  }
};
</script>
<style scoped src="../../assets/css/service/zdManage.css">
</style>